<!-- 报警事件的历史文件 -->
<template>
	<div class="eventVideo">
		<!-- <div class="itemImg">
			<img :src="getFileUrl(props.curAlarm.url)" />
		</div> -->

		<template v-if="state.list.length">
			<div class="itemVideo" :class="{ on: state.curItem == item.id }" v-for="item in state.list" :key="item.id" @click="sendVideoUrl(item)">
				<div class="video">
					<img :src="getFileUrl(props.curAlarm.url)" />
					<el-icon size="40" color="#dcd4cf">
						<VideoPlay />
					</el-icon>
				</div>
				<div class="title">{{ typeMap[item.beforeAfter] }}</div>
			</div>
		</template>
		<el-empty style="width: 100%" v-else description="暂无数据">
			<el-button type="primary" @click="getAlarmFile">刷新数据</el-button>
		</el-empty>
	</div>
</template>

<script lang="ts" setup name="EventVieo">
import { nextTick, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
import { VideoPlay } from '@element-plus/icons-vue';
import { useSmoke } from '/@/hook/index';
import alarmApi from '/@/api/smoke/alarm';
const { getAddress, getFileUrl } = useSmoke();

const props = defineProps({
	curAlarm: {
		type: Object,
		default: () => {
			return {};
		},
	},
});

const emit = defineEmits(['video']);

const typeMap: any = {
	1: '报警前视频',
	2: '报警时视频',
}

const state = reactive({
	curItem: 0,
	list: <any>[],
});

let curTimer: any = null;
function sendVideoUrl(item: any) {
	state.curItem = item.id;
	emit('video', getFileUrl(item.url));
}

onMounted(() => {
	state.curItem = 0;
	emit('video', getFileUrl(''));
	getAlarmFile();
	curTimer = setInterval(() => {
		getAlarmFile();
	}, 5000);
});

onBeforeUnmount(() => {
	clearInterval(curTimer);
});

function getAlarmFile() {
	alarmApi.getAlarmFile({ eventId: props.curAlarm.eventId }).then((res) => {
		state.list = res.data.list || [];
		if (state.list.length == 2) {
			clearInterval(curTimer);
		}
	});
}
</script>
<style lang="scss" scoped>
.eventVideo {
	padding: 10px;
	display: flex;
	justify-content: space-between;
	gap: 10px;
	text-align: center;
	flex-wrap: wrap;

	.itemImg {
		width: 100%;

		img {
			width: 100%;
			aspect-ratio: 16/9;
		}
	}

	.itemVideo {
		width: 46%;

		.video,
		video {
			background: #333333;
			width: 100%;
			aspect-ratio: 16/9;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
			position: relative;

			img {
				width: 100%;
				position: absolute;
			}
		}
		.title {
			line-height: 30px;
		}
	}
	.on {
		.title {
			color: #409eff;
		}

		.el-icon {
			display: none;
		}
	}
}
</style>
